<template>
	<jc-page>
		<u-navbar :is-back="false" :title="title" :title-color="vuex_titleColor" :background="vuex_navBackground">
		</u-navbar>
		<!-- #ifdef MP-WEIXIN -->
		<view v-for="(item,index) in components" :key="index">
			<component v-if="item.componentKey=='u_title'" is="u_title" :data="item.remoteData"></component>
			<component v-if="item.componentKey=='u_blank'" is="u_blank" :data="item.remoteData"></component>
			<component v-if="item.componentKey=='u_richtext'" is="u_richtext" :data="item.remoteData"></component>
			<component v-if="item.componentKey=='u_line'" is="u_line" :data="item.remoteData"></component>
			<component v-if="item.componentKey=='u_slideshow'" is="u_slideshow" :data="item.remoteData"></component>
			<component v-if="item.componentKey=='u_button'" is="u_button" :data="item.remoteData"></component>
			<component v-if="item.componentKey=='u_cube'" is="u_cube" :data="item.remoteData"></component>
			<component v-if="item.componentKey=='u_simplegraph'" is="u_cube" :data="item.remoteData"></component>
			<component v-if="item.componentKey=='u_video'" is="u_video" :data="item.remoteData"></component>
			<component v-if="item.componentKey=='u_suspendbutton'" is="u_suspendbutton" :data="item.remoteData">
			</component>
			<component v-if="item.componentKey=='u_goodslist'" is="u_goodslist" :data="item.remoteData"></component>
			<component v-if="item.componentKey=='u_backup'" is="u_backup" :data="item.remoteData"></component>
			<component v-if="item.componentKey=='u_search'" is="u_search" :data="item.remoteData"></component>
		</view>
		</view>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view>
			<component :is="item.componentKey" :data="item.remoteData" :componentId="item.id"
				v-for="(item,index) in components" :key="index">
			</component>
		</view>
		<!-- #endif -->
		<view class="cu-tabbar-height"></view>
	</jc-page>
</template>

<script>
	import u_title from "@/decorates/u_title.vue"; //标题栏组件
	import u_blank from "@/decorates/u_blank.vue"; //辅助空白组件
	import u_richtext from "@/decorates/u_richtext.vue"; //富文本组件
	import u_line from "@/decorates/u_line.vue"; //辅助线组件
	import u_slideshow from "@/decorates/u_slideshow.vue"; //轮播图组件
	import u_button from "@/decorates/u_button.vue"; //按钮组组件
	import u_cube from "@/decorates/u_cube.vue"; //按钮组组件
	import u_simplegraph from "@/decorates/u_simplegraph.vue"; // 单图组件
	import u_video from "@/decorates/u_video.vue"; // 视频组件
	import u_suspendbutton from "@/decorates/u_suspendbutton.vue"; // 悬浮按钮组件
	import u_goodslist from "@/decorates/u_goodslist.vue"; // 商品列表组件
	import u_backup from "@/decorates/u_backup.vue"; // 回到顶部组件
	import u_headline from "@/decorates/u_headline.vue"; // 头条组件
	import u_search from "@/decorates/u_search.vue"; // 搜索组件

	export default {
		components: {
			u_title, //标题栏组件
			u_blank, //辅助空白组件
			u_richtext, //富文本组件
			u_line, //辅助线组件
			u_slideshow, //轮播图组件
			u_button, //按钮组组件
			u_cube, //按钮组组件
			u_simplegraph, //单图组件
			u_video, //视频组件
			u_suspendbutton, //悬浮按钮组件
			u_goodslist, // 商品列表组件
			u_backup, // 回到顶部组件
			u_headline, // 头条组件
			u_search // 搜索组件
		},
		data() {
			return {
				//猜你喜欢列表
				components: [{
					"id": "M1646216587726",
					"componentKey": "u_search",
					"componentTitle": " 搜索",
					"templateId": 26,
					"remoteData": {
						"previewColor": "#E60D0D",
						"chooseStyle": "2",
						"searchStyle": "fill",
						"outlineColor": "#b0b0ba",
						"textAlign": "left",
						"textContent": "请输入搜索的商品"
					}
				}, {
					"id": "M1646017948478",
					"componentKey": "u_title",
					"componentTitle": "标题栏",
					"templateId": 1,
					"remoteData": {
						"previewColor": {
							"isColor": "1",
							"color": "#ffffff",
							"image": ""
						},
						"showTtle": true,
						"title": "标题1212",
						"textSize": 41,
						"textColor": "#3A0808",
						"textAlign": "right",
						"textStyle": [],
						"showSecondTitle": true,
						"secondTitle": "副标题1212121212",
						"secondTextSize": 19,
						"secondTextColor": "#333333",
						"secondTextAlign": "left",
						"secondTextStyle": ["1", "2"],
						"paddingTop": 3,
						"paddingBottom": 6,
						"paddingLeft": 3,
						"paddingRight": 4
					}
				}, {
					"id": "M1646019929521",
					"componentKey": "u_blank",
					"componentTitle": "辅助空白",
					"templateId": 8,
					"remoteData": {
						"previewColor": {
							"isColor": "1",
							"color": "#620707",
							"image": ""
						},
						"searchHeight": 145
					}
				}, {
					"id": "M1645596626915",
					"componentKey": "u_richtext",
					"componentTitle": "富文本",
					"templateId": 10,
					"remoteData": {
						"bgColor": "#BE0B0B",
						"paddingTop": 10,
						"paddingBottom": 10,
						"paddingLeft": 20,
						"paddingRight": 20,
						"htmlValue": "<p><span style=\"font-size: 24px;\"><span style=\"color: #ffffff;\">请填写富文本内容</span>，<span style=\"font-size: 18px;\">可以对文字进行<strong>加粗</strong>，<em>斜体</em>，<span style=\"text-decoration: underline;\">下划线</span>，<span style=\"text-decoration: line-through;\">删除线</span>，<span style=\"color: #339966;\">文字颜色</span>，等简单排版操作，也可以上传图片。</span></span></p>"
					}
				}, {
					"id": "M1646032736369",
					"componentKey": "u_line",
					"componentTitle": "辅助线",
					"templateId": 9,
					"remoteData": {
						"previewColor": {
							"isColor": "1",
							"color": "#9A0A0A",
							"image": ""
						},
						"lineStyle": "dotted",
						"borderColor": "#F6ADAD",
						"borderWeight": 4,
						"borderPadding": 68,
						"searchHeight": 21
					}
				}, {
					"id": "M1646033936277",
					"componentKey": "u_slideshow",
					"componentTitle": "轮播图",
					"templateId": 2,
					"remoteData": {
						"pictureBorder": 14,
						"bgColor": "#C50B0B",
						"paddingTop": 10,
						"paddingBottom": 10,
						"paddingLeft": 10,
						"paddingRight": 10,
						"list": [{
							"id": 1,
							"image": "http://192.168.1.24:9000/bczxshop/image/2021-11-10/316cdfc6ae914f84b0e1a8dc20730658.png",
							"isMinApp": "1",
							"h5Link": "http://www.baidu.com",
							"ghId": "",
							"minAppLink": "",
							"text": "文本"
						}, {
							"id": 2,
							"image": "http://192.168.1.24:9000/bczxshop/image/2021-11-10/316cdfc6ae914f84b0e1a8dc20730658.png",
							"isMinApp": "2",
							"h5Link": "",
							"ghId": "",
							"minAppLink": "/pages/search/search",
							"text": "文本"
						}, {
							"id": 3,
							"image": "http://192.168.1.24:9000/bczxshop/image/2021-11-10/316cdfc6ae914f84b0e1a8dc20730658.png",
							"isMinApp": "1",
							"h5Link": "",
							"ghId": "",
							"minAppLink": "",
							"text": "文本"
						}],
						"chooseStyle": "2"
					},
				}, {
					"id": "M1646037087742",
					"componentKey": "u_button",
					"componentTitle": "按钮组",
					"templateId": 4,
					"remoteData": {
						"list": [{
							"id": 1,
							"image": "",
							"isMinApp": "1",
							"h5Link": "http://www.baidu.com",
							"ghId": "",
							"minAppLink": "",
							"text": "文本"
						}, {
							"id": 2,
							"image": "",
							"isMinApp": "2",
							"h5Link": "",
							"ghId": "",
							"minAppLink": "/pages/search/search",
							"text": "文本"
						}, {
							"id": 3,
							"image": "",
							"isMinApp": "1",
							"h5Link": "",
							"ghId": "",
							"minAppLink": "",
							"text": "文本"
						}, {
							"id": 4,
							"image": "",
							"isMinApp": "1",
							"h5Link": "",
							"ghId": "",
							"minAppLink": "",
							"text": "文本"
						}, {
							"id": 5,
							"image": "",
							"isMinApp": "1",
							"h5Link": "",
							"ghId": "",
							"minAppLink": "",
							"text": "文本"
						}, {
							"id": 6,
							"image": "",
							"isMinApp": "1",
							"h5Link": "",
							"ghId": "",
							"minAppLink": "",
							"text": "文本"
						}, {
							"id": 7,
							"image": "",
							"isMinApp": "1",
							"h5Link": "",
							"ghId": "",
							"minAppLink": "",
							"text": "文本"
						}, {
							"id": 8,
							"image": "",
							"isMinApp": "1",
							"h5Link": "",
							"ghId": "",
							"minAppLink": "",
							"text": "文本"
						}],
						"chooseStyle": "2",
						"paddingTop": 5,
						"paddingBottom": 5,
						"buttonSize": 50,
						"borderRadius": 25,
						"buttonNumber": "4",
						"isScroll": true,
						"buttonLine": 1,
						"previewColor": {
							"isColor": "1",
							"color": "#F61414",
							"image": ""
						},
						"fontSize": 14,
						"textStyle": ["1"],
						"fontColor": "#F5B1B1"
					}
				}, {
					"id": "M1646039352563",
					"componentKey": "u_cube",
					"componentTitle": "图片组合",
					"templateId": 11,
					"remoteData": {
						"picture": {
							"density": 4,
							"icon": "6",
							"cudeSelected": [{
								"id": 1,
								"value": {
									"image": "https://uidesign.zafcdn.com/ZF/image/2511/b.jpg?im_scale=w375_2x",
									"isMinApp": "1",
									"h5Link": "http://www.baidu.com",
									"ghId": "",
									"minAppLink": ""
								},
								"start": {
									"x": 1,
									"y": 1
								},
								"end": {
									"x": 2,
									"y": 2
								},
								"data": [{
									"x": 1,
									"y": 1,
									"cube": "1-1"
								}, {
									"x": 1,
									"y": 2,
									"cube": "1-2"
								}, {
									"x": 2,
									"y": 1,
									"cube": "2-1"
								}, {
									"x": 2,
									"y": 2,
									"cube": "2-2"
								}]
							}, {
								"id": 2,
								"value": {
									"image": "https://uidesign.zafcdn.com/ZF/image/2511/b.jpg?im_scale=w375_2x",
									"isMinApp": "2",
									"h5Link": "",
									"ghId": "",
									"minAppLink": "/pages/search/search"
								},
								"start": {
									"x": 1,
									"y": 3
								},
								"end": {
									"x": 3,
									"y": 4
								},
								"data": [{
									"x": 1,
									"y": 3,
									"cube": "1-3"
								}, {
									"x": 1,
									"y": 4,
									"cube": "1-4"
								}, {
									"x": 2,
									"y": 3,
									"cube": "2-3"
								}, {
									"x": 2,
									"y": 4,
									"cube": "2-4"
								}, {
									"x": 3,
									"y": 3,
									"cube": "3-3"
								}, {
									"x": 3,
									"y": 4,
									"cube": "3-4"
								}]
							}, {
								"id": 3,
								"value": {
									"image": "https://uidesign.zafcdn.com/ZF/image/2511/b.jpg?im_scale=w375_2x",
									"isMinApp": "1",
									"h5Link": "",
									"ghId": "",
									"minAppLink": ""
								},
								"start": {
									"x": 3,
									"y": 1
								},
								"end": {
									"x": 4,
									"y": 1
								},
								"data": [{
									"x": 3,
									"y": 1,
									"cube": "3-1"
								}, {
									"x": 4,
									"y": 1,
									"cube": "4-1"
								}]
							}, {
								"id": 4,
								"value": {
									"image": "https://uidesign.zafcdn.com/ZF/image/2511/b.jpg?im_scale=w375_2x",
									"isMinApp": "1",
									"h5Link": "",
									"ghId": "",
									"minAppLink": ""
								},
								"start": {
									"x": 3,
									"y": 2
								},
								"end": {
									"x": 4,
									"y": 2
								},
								"data": [{
									"x": 3,
									"y": 2,
									"cube": "3-2"
								}, {
									"x": 4,
									"y": 2,
									"cube": "4-2"
								}]
							}, {
								"id": 5,
								"value": {
									"image": "https://uidesign.zafcdn.com/ZF/image/2511/b.jpg?im_scale=w375_2x",
									"isMinApp": "1",
									"h5Link": "",
									"ghId": "",
									"minAppLink": ""
								},
								"start": {
									"x": 4,
									"y": 3
								},
								"end": {
									"x": 4,
									"y": 4
								},
								"data": [{
									"x": 4,
									"y": 3,
									"cube": "4-3"
								}, {
									"x": 4,
									"y": 4,
									"cube": "4-4"
								}]
							}]
						},
						"previewColor": "#EF8E8E",
						"margin": 6,
						"currentItem": {
							"id": 2,
							"value": {
								"image": "https://uidesign.zafcdn.com/ZF/image/2511/b.jpg?im_scale=w375_2x",
								"isMinApp": "1",
								"h5Link": "",
								"ghId": "",
								"minAppLink": ""
							},
							"start": {
								"x": 1,
								"y": 3
							},
							"end": {
								"x": 3,
								"y": 4
							},
							"data": [{
								"x": 1,
								"y": 3,
								"cube": "1-3"
							}, {
								"x": 1,
								"y": 4,
								"cube": "1-4"
							}, {
								"x": 2,
								"y": 3,
								"cube": "2-3"
							}, {
								"x": 2,
								"y": 4,
								"cube": "2-4"
							}, {
								"x": 3,
								"y": 3,
								"cube": "3-3"
							}, {
								"x": 3,
								"y": 4,
								"cube": "3-4"
							}]
						},
						"selectedArr": ["1-1", "1-2", "2-1", "2-2", "1-3", "1-4", "2-3", "2-4", "3-3", "3-4",
							"3-1", "4-1", "3-2", "4-2", "4-3", "4-4"
						],
						"currentItemId": 5
					}
				}, {
					"id": "M1646043315321",
					"componentKey": "u_simplegraph",
					"componentTitle": "单图",
					"templateId": 21,
					"remoteData": {
						"paddingTop": 0,
						"paddingBottom": 0,
						"paddingLeft": 0,
						"paddingRight": 0,
						"pictureBorder": 0,
						"list": [{
							"id": 1,
							"image": "http://192.168.1.24:9000/bczxshop/image/2021-11-10/316cdfc6ae914f84b0e1a8dc20730658.png",
							"isMinApp": "1",
							"h5Link": "",
							"ghId": "",
							"minAppLink": "",
							"text": "文本",
							"hotArea": [{
								"id": 2,
								"top": 106,
								"left": 85,
								"width": 61,
								"height": 54,
								"isMinApp": "2",
								"h5Link": "",
								"ghId": "",
								"minAppLink": "/pages/search/search"
							}, {
								"id": 3,
								"top": 0,
								"left": 352,
								"width": 45,
								"height": 34,
								"isMinApp": "1",
								"h5Link": "http://www.baidu.com",
								"ghId": "",
								"minAppLink": ""
							}]
						}],
						"chooseStyle": "2"
					}
				}, {
					"id": "M1646043980425",
					"componentKey": "u_video",
					"componentTitle": "视频",
					"templateId": 22,
					"remoteData": {
						"videoUrl": {
							"videoUrl": "http://192.168.1.24:9000/sawtooth/08de46737065a6c137df3c17bd665d97.mp4",
							"isShowPoster": "0",
							"poster": ""
						},
						"paddingTop": 0,
						"paddingBottom": 0,
						"paddingLeft": 0,
						"paddingRight": 0
					}
				}, {
					"id": "M1646044526711",
					"componentKey": "u_suspendbutton",
					"componentTitle": "悬浮按钮",
					"templateId": 16,
					"remoteData": {
						"buttonSize": 56,
						"overTop": 351,
						"positionLocation": "left",
						"list": {
							"chooseStyle": "1",
							"buttonPadding": 10,
							"showStyle": "2",
							"unfoldButton": "",
							"foldButton": "",
							"list": [{
								"id": 1,
								"image": "",
								"isMinApp": "1",
								"h5Link": "",
								"ghId": "",
								"minAppLink": ""
							}, {
								"id": 2,
								"image": "",
								"isMinApp": "1",
								"h5Link": "",
								"ghId": "",
								"minAppLink": "",
								"phone": ""
							}, {
								"id": 3,
								"image": "",
								"isMinApp": "1",
								"h5Link": "",
								"ghId": "",
								"minAppLink": "",
								"phone": ""
							}, {
								"id": 4,
								"image": "",
								"isMinApp": "1",
								"h5Link": "",
								"ghId": "",
								"minAppLink": "",
								"phone": ""
							}]
						}
					}
				}, {
					"id": "M1646046284909",
					"componentKey": "u_goodslist",
					"componentTitle": " 商品列表",
					"templateId": 23,
					"remoteData": {
						"goods": [{
							"goodsId": "7608896",
							"goodsSn": "466556203",
							"goodsNumber": "196",
							"goodsTitle": "Marvel Spider-Man Heroes Print T-shirt - BLACK - L",
							"goodsImg": "https://gloimg.rglcdn.com/rosegal/pdm-product-pic/Clothing/2020/06/09/goods-img/1591897662802244099.jpg",
							"marketPrice": "38.69",
							"shopPrice": "24.49",
							"discount": 37
						}, {
							"goodsId": "7608860",
							"goodsSn": "465628603",
							"goodsNumber": "201",
							"goodsTitle": "Marvel Spider-Man Cartoon Letter Printing Short Sleeves T-shirt - BLACK - L",
							"goodsImg": "https://gloimg.rglcdn.com/rosegal/pdm-product-pic/Clothing/2020/06/08/goods-img/1591897094833495003.jpg",
							"marketPrice": "29.23",
							"shopPrice": "21.49",
							"discount": 26
						}],
						"marginTop": 0,
						"marginBottom": 0,
						"bgColor": "#D61D1D",
						"boxIsWhole": "0",
						"bgRadius": 79,
						"itemRadius": 20,
						"shopPriceColor": "#5C0606",
						"shopPriceTitle": "销售价"
					}
				}, {
					"id": "M1646052621617",
					"componentKey": "u_backup",
					"componentTitle": " 回到顶部",
					"templateId": 24,
					"remoteData": {
						"buttonSize": 57,
						"overTop": 340,
						"positionLocation": "right",
						"iconUrl": ""
					}
				}, {
					"id": "M1646101265713",
					"componentKey": "u_headline",
					"componentTitle": " 头条",
					"templateId": 25,
					"remoteData": {
						"previewColor": "#ffffff",
						"headlineHeight": 80,
						"list": [],
						"showNumber": "2",
						"headlineFontSize": 13,
						"headlineFontColor": "#773131",
						"showLogo": true,
						"logoImage": "",
						"logoImageSize": 32,
						"showTag": true,
						"headlineTag": "热点",
						"tagColor": "#ffffff",
						"tagFontColor": "#333333",
						"tagFontSize": 12,
						"showTagBorder": true,
						"tagBorderColor": "#DD2727"
					}
				}],
			}
		},
		computed: {
			title() {
				return '主页'
			}
		},
		created() {

		},
		methods: {
			//模拟onShow方法
			onHandleShow() {
				
			}
		}
	};
</script>
<style lang="scss">
body{overflow-x: hidden;}
</style>
